<template>
  <div>
    <!-- 循环菜单数组 -->
    <div v-for="menu in menus" :key="menu.path">
      <!-- 如果有子菜单 -->
      <el-submenu
        v-if="menu.children && menu.children.length"
        :index="menu.path"
        popper-append-to-body
      >
        <template slot="title">
          <!-- 绑定图标 -->
          <i :class="menu.meta.icon"></i>
          <span :class="menuTitleDisplay">{{ menu.meta.title }}</span>
        </template>
        <!-- 子节点点击事件 -->
        <navbar-item :menus="menu.children"></navbar-item>
      </el-submenu>
      <!-- 如果沒有子菜單 -->
      <el-menu-item v-else :index="menu.path">
        <!-- 绑定图标 -->
        <i :class="menu.meta.icon"></i>
        <span :class="menuTitleDisplay" slot="title">{{ menu.meta.title }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
export default {
    name:"NavbarItem",     //靠这个实现递归
    data(){
      return {
        menuTitleDisplay:{
          menu_title:this.collapse
        }
      }
    },
    props:{
        menus:{
            type:Array,
            require:true,
        },
        collapse:{
          type:Boolean,
          default:false
        }
    },
};
</script>

<style>
.menu_title{
  display: none;
}
.el-menu--collapse span{
  display: none;
}
.el-menu--collapse .el-submenu__icon-arrow{
  display: none;
}
</style>